<template>
  <section class="page">
    <div class="title">{{ this.tableHeader.title }}</div>
    <div class="horizontal-direction" style="position: relative; margin-top: 20px">
      <div class="horizontal-box">
        验收单号：<span>{{ this.tableHeader.orderNo }}</span>
      </div>
      <div class="horizontal-box" style="position: absolute; right: 0">
        验收日期：<span>{{ this.tableHeader.orderNoDate.substring(0, 10) || "" }}</span>
      </div>
    </div>

    <div>
      <table cellspacing="0" cellpadding="0" border="1" class="el-table__header main-table" style="width: 100%; margin-bottom: 15px">
        <thead class="has-gutter">
          <tr class="text-center">
            <th>采购单号</th>
            <th>供货商</th>
            <th>送货单号或报关单号</th>
            <th>设备名称</th>
            <th>厂牌</th>
            <th>型号规格</th>
            <th>单价</th>
            <th>送货数量</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item, index) in this.propsForm.detailList || []">
            <tr :key="index">
              <td>{{ item.orderNo }}</td>
              <td>{{ item.assetName }}</td>
              <td>{{ item.assetNO }}</td>
              <td>{{ item.assetVendorAdd }}</td>
              <td>{{ item.assetVendorName }}</td>
              <td>{{ item.assetModel }}</td>
              <td>{{ $util.formatPrice(item.price) }}</td>
              <td>{{ item.qty }}</td>
              <td>{{ item.remark }}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    <div class="base-stamp">
      <table cellspacing="0" cellpadding="0" border="0" class="el-table__header table-flow">
        <thead class="has-gutter">
          <tr class="text-left">
            <th><div class="examine-cell">签核角色</div></th>
            <th><div class="examine-cell">审核人员</div></th>
            <th><div class="examine-cell">审核状况</div></th>
            <th><div class="examine-cell">审核意见</div></th>
            <th><div class="examine-cell">审核时间</div></th>
          </tr>
        </thead>
        <tbody>
          <template>
            <tr class="text-left" v-for="(item, index) in propsForm.qhChkmgrdList || []" :key="index">
              <td>
                <div>{{ item.flowDesc }}</div>
              </td>
              <td>
                <div>{{ item.toUserCname }}</div>
              </td>
              <td>
                <div>{{ item.chkStatusName }}</div>
              </td>
              <td>
                <div>{{ item.chkOk }}</div>
              </td>
              <td>
                <div>{{ item.chkDate }}</div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </section>
</template>

<script>
module.exports = {
  props: {
    propsForm: {
      type: Object,
    },
  },
  data() {
    return {
      sessionStorageData: JSON.parse(sessionStorage.parameterData),
      applicationForm: {
        detailList: [],
      },
      tableHeader: {
        title: "",
        orderNo: "",
        orderNoDate: "",
        type: "",
      },
    };
  },
  mounted() {
    this.tableHeader.title = this.propsForm.detailList[0]?.title;
    this.tableHeader.orderNo = this.propsForm.detailList[0]?.orderNo;
    this.tableHeader.orderNoDate = this.propsForm.detailList[0]?.orderNoDate;
  },
};
</script>

<style>
.horizontal-box {
  margin-bottom: 5px;
}
.page {
  margin: auto;
  width: 100%;
  max-width: 297mm;
}
.title {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}
.out-table {
  border-collapse: separate;
  box-sizing: border-box;
}
.out-table th {
  background-color: #b3ffb3;
}
</style>
